<template>
    <!-- 二维码弹窗 -->
    <z-popup 
        @open="scannerShow = true"
        duration="0" 
        :style="popupStyle"
    >
        <!-- <div class="z-scanner-loading" v-if="loading">
            <van-loading color="#FFAA00" />
        </div> -->
        <!-- <qrcode-drop-zone @decode="onDecode"> -->
        <qrcode-stream 
            v-if="scannerShow"
            @detect="onDetect" 
            @camera-on="onCameraOn" 
            @camera-off="onCameraOff" 
            @error="onError"
            @decode="onDecode"
            :track="paintBoundingBox"
            :paused="paused"
            :torch="torch"
        >   
            <div class="z-scanner">
                <div class="z-scanner-back" @click="onBack"></div>
            </div>
        </qrcode-stream>
        <!-- </qrcode-drop-zone> -->
    </z-popup>
</template>
<script setup>
import { QrcodeStream,QrcodeDropZone } from 'vue-qrcode-reader';
import { showToast } from 'vant'

// 传递
const emits = defineEmits(['update:show', 'success']);
// 弹窗样式
const popupStyle = 'margin:0;max-width:100%;width:100%;height:100%;overflow:hidden;background:#17171a;border-radius:0;'
// 加载
const loading = ref(true)
// 加载扫描仪
const scannerShow = ref(true)
// 冻结相机
const paused = ref(false)
// 开关手电筒
const torch = ref(false)

// // 关闭弹窗
// const onClose = ()=>{
//     emits('close')
// }


// 跟踪二维码，画布覆盖相机流
const paintBoundingBox = (detectedCodes, ctx)=> {
  for (const detectedCode of detectedCodes) {
    const {
      boundingBox: { x, y, width, height }
    } = detectedCode
    ctx.lineWidth = 2
    ctx.strokeStyle = '#007bff'
    ctx.strokeRect(x, y, width, height)
  }
}
//回调扫描结果
const onDecode = (result)=> {
    showToast('扫码成功')
    console.log(result);
    //   if (result) {
    //     console.log(result);
    //     // this.$emit("success", result);
    //   }
}
// 扫描成功
const onDetect = (detectedCodes)=>{
    showToast('扫描成功')
    emits('success', detectedCodes)
    emits('update:show', false);
    scannerShow.value = false
}

// 摄像头启动
const onCameraOn = (capabilities)=>{
    console.log('摄像头启动')
    // loading.value = false
    console.log(capabilities)
}

// 摄像头关闭
const onCameraOff = (e)=>{
    console.log('摄像头关闭')
    console.log(e)
}

// 相机初始化失败
const onError = (error)=>{
    console.log(error.message)
    showToast('当前版本暂不支持扫码功能')
    emits('update:show', false);
    scannerShow.value = false

}

// 取消扫描
const onBack = ()=>{
    console.log('取消扫描')
    emits('update:show', false);
    scannerShow.value = false
    // loading.value = true
}

</script>
<style scoped lang="scss">
// .z-scanner-loading {
//     position: fixed;
//     top: 0;
//     left: 0;
//     bottom: 0;
//     right: 0;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     background-color: #17171a;
//     z-index: 100;
// }

.z-scanner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        rgba(128, 128, 128, 0.4) 5%,
        rgba(128, 128, 128, 0.1),
        rgba(128, 128, 128, 0.4) 95%
    );
    &-back {
        width: 22px;
        height: 22px;
        background-image: url('@/assets/svg/common/v_scan_back.svg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 50px;
        margin-left: 20px;
    }
}
</style>